<template>
  <div class="data-container">
    <div class="title">
      <div class="text">会员等级资费</div>
    </div>
    <div class="data-list">
      <div class="item">
        <img src="@/assets/img/vip-1.png" class="icon" />
        <div class="text-1">财富通至尊帝王</div>
        <div class="text-1">￥198000/年</div>
        <div class="text-1">3年 仅需39.8万</div>
      </div>
      <div class="item">
        <img src="@/assets/img/vip-2.png" class="icon" />
        <div class="text-1">财富通金钻VIP</div>
        <div class="text-1">￥98000/年</div>
        <div class="text-1">3年 仅需19.8万</div>
      </div>
      <div class="item">
        <img src="@/assets/img/vip-3.png" class="icon" />
        <div class="text-1">财富通银钻VIP</div>
        <div class="text-1">￥59800/年</div>
        <div class="text-1">3年 仅需9.8万</div>
      </div>
      <div class="item">
        <img src="@/assets/img/vip-4.png" class="icon" />
        <div class="text-1">财富通钻石VIP</div>
        <div class="text-1">￥29800/年</div>
        <div class="text-1">3年 仅需5.88万</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'panel3',
  data() {
    return {}
  },

  computed: {},
  mounted() {},
  methods: {
    onResize() {},
  },
}
</script>
<style lang="scss" scoped>
$bgColor: #060a22;
$mainColor: #68cee0;
$mainColorOpcity: rgba(104, 206, 224, 0.3);
.data-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 20px;
  overflow: hidden;
}
.title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  .icon {
    cursor: pointer;
  }
}

.data-list {
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: calc(100% - 10px);
  .item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: calc(50% - 5px);
    height: calc(50% - 10px);
    margin-right: 10px;
    margin-bottom: 10px;
    color: #ffffff;
    &:nth-child(2n) {
      margin-right: 0;
    }
    .icon {
      width: 30px;
      margin-right: 10px;
    }
    .text-1 {
      margin-right: 15px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>
